<!DOCTYPE html>
<html class="ui-page-login">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="__STATIC__/css/style.css" rel="stylesheet" />
    <!--<link href="../pubilc/iconfont/iconfont.css">-->
    <style>
        .mui-bar-nav {
            top: 0;
            -webkit-box-shadow: 0 1px 6px #ccc;
            box-shadow: 0 1px 6px #ccc
        }
        .mui-bar{
            position:fixed;
            z-index: 10;
            right: 0;
            left: 0;
            height: 44px;
            padding-left: 10px;
            padding-right: 10px;
            border-bottom: 0;
            background-color: #F7F7F7;
            background: #f04e23;
            backface-visibility:hidden;
        }
        .mui-icon {
            font-family: Muiicons;
            font-size: 24px;
            font-weight: 400;
            font-style: normal;
            line-height: 1;
            display: inline-block;
            text-decoration: none;
            -webkit-font-smoothing: antialiased
        }
        .mui-pull-left {
            float: left;
        }
        .mui-icon-back:before,
        .mui-icon-left-nav:before {
            content: '\e471'
        }
        .mui-input-group {
            position: relative;
            padding: 0;
            border: 0;
            background-color: #fff
        }

        .mui-content-padded {
            margin: 10px
        }
        .mui-bar .mui-icon{
            font-size: 24px;
            position:relative ;
            z-index: 20;
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .mui-bar-nav~.mui-content .mui-anchor {
            display: block;
            visibility: hidden;
            height: 45px;
            margin-top: -45px
        }

        .mui-bar-nav.mui-bar .mui-icon {
            margin-right: -10px;
            margin-left: -10px;
            padding-right: 10px;
            padding-left: 10px;
            color: white;
        }

        .mui-title {
            font-size: 17px;
            font-weight: 500;
            line-height: 44px;
            position: absolute;
            display: block;
            width: 100%;
            margin: 0 -10px;
            padding: 0;
            text-align: center;
            white-space: nowrap;
            color: white;
        }
        .mui-bar .mui-title {
            right: 40px;
            left: 40px;
            display: inline-block;
            overflow: hidden;
            width: auto;
            margin: 0;
            text-overflow: ellipsis
        }
        .mui-title a {
            color: inherit
        }

        .mui-content {
            background-color: #efeff4;
            -webkit-overflow-scrolling: touch
        }

        .mui-bar-nav~.mui-content {
            padding-top: 44px
        }

        .mui-bar-nav~.mui-content.mui-scroll-wrapper .mui-scrollbar-vertical {
            top: 44px
        }
        .mui-input-group input:last-child {
            background-image: none
        }
        .mui-input-group:before {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            height: 1px;
            content: '';
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
            background-color: #c8c7cc
        }
        .mui-btn-block {
            font-size: 18px;
            display: block;
            width: 100%;
            margin-bottom: 10px;
            padding: 15px 0
        }
        .mui-btn-blue,
        .mui-btn-primary,
        input[type=submit] {
            color: #fff;
            border: 1px solid #f04e23;
            background-color: #f04e23;
        }
        input[type=color],
        input[type=date],
        input[type=datetime-local],
        input[type=datetime],
        input[type=email],
        input[type=month],
        input[type=number],
        input[type=password],
        input[type=search],
        input[type=tel],
        input[type=text],
        input[type=time],
        input[type=url],
        input[type=week],
        select,
        textarea {
            width: 100%;
            padding: 10px 15px 10px 80px;
            -webkit-user-select: text;
            border: none;
            border-radius: 3px;
            outline: 0;
            background-color: #fff;
            -webkit-appearance: none;

        }
        .mui-input-group input,
        .mui-input-group textarea {
            margin-bottom: 0;
            border: 0;
            border-radius: 0;
            background-color: transparent;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .mui-input-row label~input,
        .mui-input-row label~select,
        .mui-input-row label~textarea {
            width: 78%;
            margin-bottom: 0;
            border: 0;
            height: 20px;
        }
        .mui-input-row label {
            font-family: 'Helvetica Neue', Helvetica, sans-serif;
            line-height: 1.1;
            float: left;
            padding: 11px 15px;

        }
        .mui-input-row {
            position: relative;
            clear: left;
            overflow: hidden;
        }


        .area {
            margin: 20px auto 0px auto;
        }
        .mui-input-group:first-child {
            margin-top: 20px;
        }
        .mui-input-group label {
            width: 22%;
            position: absolute;
        }
        p {
            font-size: 14px;
            margin-top: 0;
            margin-bottom: 10px;
            color: #8f8f94
        }
        .mui-input-group .mui-input-row {
            height: 40px
        }
        .mui-input-group .mui-input-row:after {
            position: absolute;
            right: 0;
            bottom: 0;
            left: 15px;
            height: 1px;
            content: '';
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
            background-color: #c8c7cc
        }
        .mui-checkbox input[type=checkbox],
        .mui-radio input[type=radio] {
            top: 6px;
        }
        .mui-content-padded {
            margin-top: 25px;
        }
        .mui-btn {
            padding: 10px;
        }

    </style>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">注册源之东方商城</h1>
</header>
<div class="mui-content">
    <form class="mui-input-group" id="add_user" method="post" action="/activity_create">
        <div class="mui-input-row">
            <label>昵称</label>
            <input  name="username" id="username" type="text" class="mui-input-clear mui-input" placeholder="请输入账号">
            <span id="pds" style="font-size: 12px; position: absolute;right: 20px;top: 8px;color: red;display: none;">帐号只能是数字或字母下划线中横线</span>
        </div>
        <div class="mui-input-row">
            <label>姓名</label>
            <input  name="surename" type="text" class="mui-input-clear mui-input" placeholder="请输入您的真实姓名" maxlength="4">
        </div>

        <div class="mui-input-row">
            <label>手机</label>
            <input  name="mobile" type="tel" id="phone" class="mui-input-clear mui-input" placeholder="请输入手机号" maxlength="11">
            <input  name="icon" type="hidden" id="icon" class="mui-input-clear mui-input"  value="{$icon}">
            <input name="pid" type='hidden' id='pid' class="mui-input-clear mui-input"  value="{$why}">
            <input name="url" type='hidden' id='url' class="mui-input-clear mui-input"  value="{$url}">
            <input name="code" type='hidden' id='code' class="mui-input-clear mui-input"  value="0">
            <input name="openid" type='hidden' id='openid' class="mui-input-clear mui-input"  value="{$openid}">
            <span id="mobile_span" style="font-size: 12px; position: absolute;right: 20px;top: 8px;color: red;display: none;">请输入未注册的手机号</span>
        </div>
        <div class="mui-content-padded">
            <button type="submit" class="mui-btn mui-btn-block mui-btn-primary">注册</button>
            <p style="text-align: center">备注:手机号必须使用未注册手机号</p>
        </div>
    </form>

</div>
<script src="__STATIC__/js/jquery-3.1.1.min.js"></script>
<script>
	// 用户名
	$('#username').blur(function(){
		var re = /^[A-Za-z0-9\u4e00-\u9fa5]+$/;
		if(!re.test($('#username').val())){
			$('#pds').show();
			return false;
		}
		if($('#username').val()==''){
			$("#pds").hide();
			return false;
		}
	// 	$.ajax({
	// 		url: '/check_username',
	// 		type : 'post',
	// 		data: {username: $('#username').val()},
	// 		cache: false,
	// 		success: function (data) {
	// 			if(data.status == 1) {
	// 				$('#pds').hide();
	// 			} else {
	// 				alert(data.message);
	// 			}
	// 		}
	// 	});
	// });
	// 手机号
	$('input[name="mobile"]').blur(function(){
		if(!/^1[345789]\d{9}$/.test($('input[name="mobile"]').val())){
			$('#mobile_span').show();
			return false;
		}
		if($('input[name="mobile"]').val()==''){
			$("#mobile_span").hide();
			return false;
		}
	// 	$.ajax({
	// 		url: '/check_mobile',
	// 		type : 'post',
	// 		data: {mobile: $('input[name="mobile"]').val()},
	// 		cache: false,
	// 		success: function (data) {
	// 			if(data.status == 1) {
	// 				$('#mobile_span').hide();
	// 			} else {
	// 				alert(data.message);
	// 			}
	// 		}
	// 	});
	// });
	//	alert($('#add_user').serialize());
	//提交
	$('#reg').click(function(){
		var reg= /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&*]+$)(?![\d!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$/;
		if ($("#phone").val().length!=11) {
			alert("请输入11位手机号");
			return false;
		}
		//正则表达式，test检索input的值
		else if(!(/^1[345789]\d{9}$/.test($('#phone').val()))){
			alert("手机号码有误，请重填");
			return false;
		}
		if($('input').val() == "" ||$('input').val()==null){
			alert('请填写完整！');
			return false;
		}
		// $.ajax({
		// 	type : 'post',
		// 	dataType : 'json',
		// 	data : $('#add_user').serialize(),
		// 	url : '/activity_create',
		// 	async : true,
		// 	success : function(data){
		// 		if(data.status == 0) {
		// 			alert(data.message);
		// 		}
		// 		if(data.status == 1) {
		// 			window.location.href = '/myself';
		// 		}
		// 	},
		// 	error:function(e){
		// 		//异常处理；
		// 		var error = e.responseJSON.msg;
		// 		var arr = Object.values(error);
		// 		alert(arr);
		// 	}
		// });
	})

</script>
</body>

</html>
